import Form from "./index";
import { h, reactive, ref } from "vue";

export default function (props) {
  const formData = ref({});
  const formRef = ref(null);
  // 传入props自动ref解包
  const Component = (_, { slots }) => {
    // 外部传入的props可能会是响应式对象，不在模板中不会自动解包 使用reactive包裹
    return h(
      Form,
      {
        ref: formRef,
        modelValue: formData.value,
        "onUpdate:modelValue": (val) => (formData.value = val),
        ...reactive(props),
      },
      slots
    );
  };

  return {
    Form: Component,
    formData: formData,
    formMethods: formRef.value,
  };
}
